<template>

   
    
        理财编号:<input type="text" v-model="Id">
        理财名称:<input type="text" v-model="Name">
        理财收益:<input type="text" v-model="MinMoney">-
        <input type="text" v-model="MaxMoney">
    
        <input type="button" value="查询" @click="ShowFinan()">
    
        <table class="table table-bordered" border="1">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="allSelect"  @change="onChangeAll">全选
                    </th>
                    <th>理财编号</th>
                    <th>理财名称</th>
                    <th>年收益</th>
                    <th>月收益</th>
                    <th>最低金额</th>
                    <th>理财人数</th>
                    <th>理财风险等级</th>
                    <th>年限</th>
                    <th>利率</th>
                    <th>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr v-for=" item in Show">
                    <td>
                        <input type="checkbox" v-model="itemSelect" :value="item.F_FId" >
                    </td>
                    <td> {{ item.F_FId }}</td>
                    <td> {{ item.F_FName }}</td>
                    <td> {{ item.F_YearMoney }}</td>
                    <td> {{ (Number(item.F_YearMoney) /12).toFixed(2)  }}</td>
                    <td> {{ item.F_MinMoney }}</td>
                    <td> {{ item.F_Count }}</td>
                    <td> {{ Number(item.F_FinanLevel) ==0?"低风险": item.F_FinanLevel?"中风险":"高风险" }}</td>
                    <td> {{ item.I_Year }}</td>
                    <td> {{ item.I_Interest }}</td>
                    <td>
                         <slot :id="item.F_FId"> <!-- 声明插槽 -->

                        </slot>
                    </td>
                </tr>
            </tbody>
    
        </table>
    
        <span>
            共{{ page.PageCount }}条数据,每页显示{{ page.PageSize }}条,共{{ page.PageIndex }}/{{ page.totalCount }}页 
        </span>
        <a href="#" @click="Home(1)" >首页</a>&nbsp;&nbsp;
        <a href="#" @click="Home(page.PageIndex-1)" >上一页</a>&nbsp;&nbsp;
        <a href="#" @click="Home(page.PageIndex+1)" >下一页</a>&nbsp;&nbsp;
        <a href="#" @click="Home( Number(page.totalCount) )" >尾页</a>&nbsp;&nbsp;
    
        <select v-model="NewPS" @change="NewPaS">
            <option value="1" >每页显示1条</option>
            <option value="2" >每页显示2条</option>
            <option value="3" >每页显示3条</option>
        </select>
    
        <input type="text" style="width: 40px;" v-model="NewPI"  >
        <input type="button" value="跳转" @click="NewPaI" />
    
    </template>
    
    <script setup lang="ts">
    
    import {ref,onMounted} from "vue"
    import axios from "axios"
    //import { useRouter } from "vue-router"
    
    //const router = useRouter();
    
    //显示的响应式数据
    const Show = ref([{
        F_FId:"",
        F_FName:"",
        F_YearMoney:"",
        F_MinMoney:"",
        F_Count:"",
        F_FinanLevel:"",
        I_ID:"",
        I_Year:"",
        I_Interest:""
    }])
    //查询的响应式数据
    const Id = ref("")
    const Name = ref("")
    const MinMoney = ref("")
    const MaxMoney = ref("")
    //分页响应式数据
    const page = ref({
        PageSize:2,//每页显示条数
        PageIndex:1,//当前页
        PageCount:'',//总条数
        totalCount:'',//总页数
    })
    const NewPS = ref(2);
    const NewPI = ref();
    
    const allSelect = ref(false);
    const itemSelect = ref([]);

    const onChangeAll = (e:any)=>{
        var res = e.target.checked;
        if(res){

        }
    }

    //生命周期钩子函数
    onMounted (()=>{
        ShowFinan();
    })
    // 显示 查询 分页方法
    const ShowFinan = ()=>{
        axios({
            method:"get",
            url:"http://localhost:63517/api/Finan/ShowFinan",
            params:{
                Id:Id.value,
                Name:Name.value,
                MinMoney:MinMoney.value,
                MaxMoney:MaxMoney.value,
                PageSize:page.value.PageSize,
                PageIndex:page.value.PageIndex,
            }
        })
        .then(res=>{
            console.log(res.data)
            Show.value = res.data.list;
            page.value.PageCount = res.data.PageCount;
            page.value.totalCount = res.data.totalCount;
        })
        .catch(err=>{
            console.log(err)
        })
    }
    //翻页方法
    const Home = (I:number)=>{
        if(I>=1 && I<= Number(page.value.totalCount) ){
            page.value.PageIndex = I;
            ShowFinan();
        }
        else{
            alert("页码有误!");
            return;
        }
    }
    //改变页容量方法
    const NewPaS = ()=>{
        page.value.PageSize = NewPS.value;
        ShowFinan();
    }
    
    //跳转指定页码方法
    const NewPaI = ()=>{
    
    if(NewPI.value == ''){
        alert('页码不能为空!');
        NewPI.value = '';
        return;
    }
    
    if(isNaN(Number(NewPI.value))){
        alert('页码必须为数字!');
        NewPI.value = '';
        return;
    }
    
    
    if(NewPI.value>=1 && NewPI.value<= Number(page.value.totalCount) ){
        page.value.PageIndex = NewPI.value;
        ShowFinan();
    }
    else{
        alert("页码有误!");
        NewPI.value = '';
        return;
    }
    }
    

    
    
    </script>